<template>
  <el-card shadow="never">
    <el-table :data="accounts" border stripe>
      <el-table-column prop="system_name" label="系统名称" min-width="120" />
      <el-table-column prop="username" label="账户名称" min-width="120" />
      <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
      <el-table-column prop="created_time" label="创建时间" min-width="160">
        <template #default="{ row }">
          {{ formatDate(row.created_time) }}
        </template>
      </el-table-column>
      <el-table-column prop="updated_time" label="更新时间" min-width="160">
        <template #default="{ row }">
          {{ formatDate(row.updated_time) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="$emit('decrypt', row)">
            <el-icon><View /></el-icon>查看密码
          </el-button>
          <el-button type="warning" size="small" @click="$emit('edit', row)">
            <el-icon><Edit /></el-icon>编辑
          </el-button>
          <el-button type="danger" size="small" @click="$emit('delete', row)">
            <el-icon><Delete /></el-icon>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { View, Edit, Delete } from '@element-plus/icons-vue'

defineProps({
  accounts: {
    type: Array,
    default: () => []
  }
})

defineEmits(['edit', 'delete', 'decrypt'])

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleString()
}
</script> 